<template>
  <view class="classes">
    <view
      class="classes-item"
      v-for="item in classList"
      :key="item.id"
      @click="handleItemClick(item)"
    >
      {{ item.className }}
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
  import { listClass } from '@/api/org.js';

  import { goBack } from '@/utils/app';

  const schoolId = ref()
  const gradeId = ref()
  onLoad((options) => {
    schoolId.value = options.schoolId
    gradeId.value = options.gradeId
  })

  onMounted(() => {
    listClassReq();
  });

  const classList = ref([]);
  const listClassReq = async () => {
    const res = await listClass(schoolId.value, gradeId.value);
    const data = res.data || [];
    classList.value = data;
  };

  const handleItemClick = (item) => {
    uni.$emit('__selectClasses__', item);
    goBack();
  };
</script>

<style scoped lang="scss">
  .classes {
    margin-top: 24rpx;
    display: flex;
    flex-direction: column;

    .classes-item {
      padding: 24rpx 24rpx;
      color: #1d2129;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      background: #fff;
      border-bottom: 1rpx solid #efeff4;
    }

    .classes-item:last-child {
      border-bottom: none;
    }
  }
</style>
